<template>
  <div class="timebox">
    <div>
      <p>考试时间：{{timerCount2}}:{{ timerCount1}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'countdown',
    data() {
      return {
        timeSeconds: 0,
        timeMinutes: 0,
        seconds: 59,
        minutes: 59,
        timer: null
      };
    },
    methods: {
      num(n) {
        return n < 10 ? "0" + n : "" + n;
      },
      // 重新计时
      reset() {
        sessionStorage.removeItem("answered");
        window.location.reload();
        localStorage.removeItem("startTime1");
        localStorage.removeItem("startTime2");
        clearInterval(this.timer);
      },
      clear() {
        localStorage.removeItem("startTime1");
        localStorage.removeItem("startTime2");
        sessiontirage.setItem("answered", 1);
        clearInterval(this.timer);
      },
      // 倒计时
      timing() {
        let [startTime1, startTime2] = [localStorage.getItem("startTime1"), localStorage.getItem("startTime2")];
        let nowTime = new Date().getTime();
        if (startTime1) {
          let surplus = this.seconds - parseInt((nowTime - startTime1) / 1000);
          this.timeSeconds = surplus <= 0 ? 0 : surplus;
        } else {
          this.timeSeconds = this.seconds;
          localStorage.setItem("startTime1", nowTime); //存储秒
        }
        if (startTime2) {
          this.timeMinutes = startTime2;
        } else {
          this.timeMinutes = this.minutes;
          localStorage.setItem("startTime2", this.minutes); //存储分
        }
        this.timer = setInterval(() => {
          if (this.timeSeconds == 0 && this.timeMinutes != 0 && this.timeMinutes > 0) {
            let nowTime = new Date().getTime();
            this.timeSeconds = this.seconds;
            localStorage.setItem("startTime1", nowTime);
            this.timeMinutes--;
            localStorage.setItem("startTime2", this.timeMinutes);
          } else if (this.timeMinutes == 0 && this.timeSeconds == 0) {
            this.timeSeconds = 0;
            this.clear();
            alert("考试时间到");
          } else {
            this.timeSeconds--;
          }
        }, 1000);
      }
    },
    mounted() {
      if (sessionStorage.getItem("answered") != 1) {
        this.timing();
      }
    },
    computed: {
      timerCount1() {
        return this.timeSeconds < 10 ? "0" + this.timeSeconds : "" + this.timeSeconds;
      },
      timerCount2() {
        return this.timeMinutes < 10 ? "0" + this.timeMinutes : "" + this.timeMinutes;
      }
    },
    destroyed() {
      // 退出后清除计时器
      if (this.timer) {
        clearInterval(this.timer);
      }
    }
  }
</script>

<style>
  .timebox {
    font-size: 20px;
    color: dodgerblue;
    width: 100vw;
    height: 20px;
    margin-top: -10px;
    margin-bottom: 10px;
    text-align: center;
  }
</style>
